<template>
  <div class="app-container">
    <!-- 会员信息 -->
    <el-row :gutter="10" class="mb8">
      <el-col>
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
        >导出</el-button>

      </el-col>
    </el-row> 
	
    
    <el-descriptions>
      <el-descriptions-item label="场馆名称:">
        <el-select v-model="queryParams.venueId" clearable class="m-2" @change="changeVenue">
          <el-option
            v-for="item in venueList"
            :key="item.id"
            :label="item.venueName"
            :value="item.id"
          />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="会员数:">{{ memberNum }}</el-descriptions-item>
      <el-descriptions-item label="流水:" hidden>{{ liushuiNum }}</el-descriptions-item>
    </el-descriptions>
   
	
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column label="会员类型" prop="cardTypeStr" min-width="100" />
      <el-table-column label="卡号" prop="cardCode" min-width="180" />
      <el-table-column label="姓名" prop="memberName" min-width="150" />
      <el-table-column label="性别" prop="sexStr" min-width="120" />
      <el-table-column label="生日" prop="memberBirth" min-width="120" />
      <el-table-column label="手机号" prop="memberTelno" min-width="120" />
      <el-table-column label="累计充值金额" prop="allRecharge" min-width="120" />
      <el-table-column label="账户余额" prop="balance" min-width="120" />
      <el-table-column label="累计消费金额" prop="allConsume" min-width="120" />
      <el-table-column label="最新充值时间" prop="lastRechargeTime" min-width="160" />
      <el-table-column label="订场时长" prop="allOrderTime" min-width="120" />
      <el-table-column label="过期时间" prop="expirationTime" min-width="120" />
      <el-table-column label="状态" prop="statusStr" min-width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.status==1" type="success">在籍</el-tag>
          <el-tag v-else type="warning">到期</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160" fixed="right" class-name="small-padding">
        <template #default="scope">
          <el-button type="text" @click="record(scope.row)">消费记录</el-button>
          <el-button type="text" @click="recharge(scope.row)">充值记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
	
	
    <el-dialog v-model="open" title="消费记录" width="1000px" append-to-body :close-on-click-modal="false">
      <el-table v-loading="xfloading" :data="records">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column label="消费单号" prop="dataId" min-width="120" />
        <el-table-column label="消费类型" prop="consumeTypeStr" min-width="120" />
        <el-table-column label="消费时间" prop="orderTime" min-width="120" />
        <el-table-column label="消费金额" prop="dataValue" min-width="120" />
        <el-table-column label="余额" prop="afterBalance" min-width="120" />
      </el-table>
      <pagination
        v-show="totalXF > 0"
        v-model:page="queryParamsXF.pageNum"
        v-model:limit="queryParamsXF.pageSize"
        :total="totalXF"
        @pagination="getXFList"
      />
    </el-dialog>
    <el-dialog
      v-model="open2" title="充值记录" width="800px" append-to-body
      :close-on-click-modal="false"
    >
      <el-table v-loading="czloading" :data="recharges">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column label="充值日期" prop="orderTime" min-width="120" />
        <el-table-column label="充值单号" prop="dataId" min-width="120" />
        <el-table-column label="充值金额" prop="dataValue" min-width="120" />
      </el-table>
      <pagination
        v-show="totalCZ > 0"
        v-model:page="queryParamsCZ.pageNum"
        v-model:limit="queryParamsCZ.pageSize"
        :total="totalCZ"
        @pagination="getCZList"
      />
    </el-dialog>
  
  </div>
</template>

<script setup name="oam_venue_member">
import { getMemberListAll, venueListAll, getVenueYYInfo, getRecordByMemberId } from '/src/api/oam/basic'
import { getCurrentInstance, ref } from 'vue'
import { onMounted, reactive } from '@vue/runtime-core'
const { proxy } = getCurrentInstance()
const total = ref(0)
const totalXF = ref(0)
const totalCZ = ref(0)
const loading = ref(false)
const xfloading = ref(false)
const czloading = ref(false)
const open = ref(null)
const open2 = ref(null)
const tableData = ref([])
const venueList = ref([])
const records = ref([])
const recharges = ref([])
const memberNum = ref('')
const liushuiNum = ref('')
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    venueId: undefined
  },
  queryParamsXF: {
    pageNum: 1,
    pageSize: 10,
    type: 1,
    onlyConsume: 1
  },
  queryParamsCZ: {
    pageNum: 1,
    pageSize: 10,
    type: 0,
    consumeType: 0
  }
})
const { queryParams, queryParamsCZ, queryParamsXF } = toRefs(data)
onMounted(() => {
  getList()
  getVenueList()
  venueYYInfo(0)
})
function getVenueList() {
  venueListAll().then(res => {
    loading.value = false
    venueList.value = res.data
  })
}
function getList() {
  loading.value = true
  getMemberListAll(queryParams.value).then(res => {
    loading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}
function changeVenue(e) {
  venueYYInfo(e)
  getList()
}
function venueYYInfo(e) {
  getVenueYYInfo(e).then(res => {
    memberNum.value = res.data.memberCount
    liushuiNum.value = res.data.amount
  })
}

/** 导出按钮操作 */
function handleExport() {
  // proxy.download('oam/venue/export', {
  //   ...queryParams.value
  // }, `role_${new Date().getTime()}.xlsx`)
}

function getXFList() {
  xfloading.value = true
  getRecordByMemberId(queryParamsXF.value).then(res => {
    xfloading.value = false
    records.value = res.rows
    totalXF.value = res.total
  })
}
// 消费记录
function record(row) {
  queryParamsXF.value.memberId = row.id
  getXFList()
  open.value = true
}

function getCZList() {
  czloading.value = true
  getRecordByMemberId(queryParamsCZ.value).then(res => {
    czloading.value = false
    recharges.value = res.rows
    totalCZ.value = res.total
  })
}
// 充值记录
function recharge(row) {
  queryParamsCZ.value.memberId = row.id
  getCZList()
  open2.value = true
}
</script>

<style scoped>

</style>
